<template>
  <div>
    <div class="row-header">
      <el-form :model="form" ref="form" :inline="true" label-width="150px">
        <el-form-item label="操作类型" prop="type">
          <el-input v-model.trim="form.type" placeholder="请输入操作类型"></el-input>
        </el-form-item>
        <el-form-item label="卡号" prop="cardNumber">
          <el-input v-model.trim="form.cardNumber" placeholder="请输入号码"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <el-input v-model.trim="form.content" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="其他ID" prop="otherId">
          <el-input v-model.trim="form.otherId" placeholder="请输入其他ID"></el-input>
        </el-form-item>
        <el-form-item label="级别" prop="level">
          <el-input v-model.trim="form.level" placeholder="请输入级别"></el-input>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" icon="el-icon-search" size="small" @click="searchData">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetForm">重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-button type="shenda" size="small" icon="el-icon-refresh" @click="page.current=1,initData()">刷新数据</el-button>
      <el-table :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
                :data="tableData" class="row-main-table"
                ref="table" tooltip-effect="dark"
                v-loading.fullscreen="tableLoading" element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <el-table-column type="index" label="序号" align="center" :width="$store.state.app.screenWidth<992?'80px':'auto'" :fixed="$store.state.app.screenWidth<992?true:false"></el-table-column>
        <el-table-column prop="logType" label="日志类型" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="cardNumber" label="卡号" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="operationTime" label="操作时间" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'"></el-table-column>
        <el-table-column prop="content" label="内容" align="center" :width="$store.state.app.screenWidth<992?'150px':'auto'">
          <template slot-scope="scope">
           <div class="row-content">
             <div :class="scope.row.showMore?'content-all':'content-part'">{{scope.row.content}}</div>
             <div class="btn-down" v-show="!scope.row.showMore" ><el-button type="text" @click="scope.row.showMore=true">详情</el-button></div>
             <div class="btn-up" v-show="scope.row.showMore" ><el-button type="text" @click="scope.row.showMore=false">收起</el-button></div>
           </div>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow':$store.state.app.screenWidth<992?'scroll':'auto'}">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="row-main-pager"
          :current-page.sync="page.current"
          :page-size="page.size"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          background></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {getSearchLog} from '@/api/getData'
export default {
  data() {
    return {
      form:{
        type: '',
        cardNumber: '',
        content: '',
        otherId: '',
        level: '',
      },
      page: {
        current: 1,
        size: 10,
      },
      total: 0,
      tableData: [],
      tableLoading: false,
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData(){
      this.tableLoading = true;
      let res = await getSearchLog({
        logType: this.form.type,
        cardNumber: this.form.cardNumber,
        otherId: this.form.otherId,
        content: this.form.content,
        level: this.form.level,
        page: {
          current: this.page.current,
          size: this.page.size
        }
      })
      this.total = 0;
      this.tableData = [];
      if(res._result && res.data.records){
        for(let item of res.data.records){
          item.showMore = false;
          this.tableData.push(item)
        }
        this.total = res.data.total;
      }
      this.tableLoading = false;
      /*let arr = [
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
        { cardNumber: '11111111111111111', operationTime: '2020-12-31', content: '订单编号 :1348467780371435521,支付流水号:4200000913202101113733240209,回调信息:PaymentPo(appid=wx7d0c98d9d3dc3e7f, mch_id=1578025481, device_info=null, nonce_str=00000000ef33759e0176ef6e38c801ba, sign=E861ECB441A8F2B7F6C580EEF52AEB14, body=null, detail=null, attach=WEIXIN,1348467780371435521, out_trade_no=1348467780371435521, fee_type=CNY, spbill_create_ip=null, time_start=null, time_expire=null, goods_tag=null, total_fee=1990, notify_url=null, trade_type=JSAPI, limit_pay=null, openid=oR12L1CqikAH9CcTGxIoXxZ9m7mg, sign_type=null, result_code=SUCCESS, err_code=null, err_code_des=null, is_subscribe=N, bank_type=OTHERS, settlement_total_fee=null, cash_fee=1990, cash_fee_type=null, transaction_id=4200000913202101113733240209, time_end=20210111111232, mch_appid=null, partner_trade_no=null, check_name=null, amount=null, desc=null, mchid=null, sub_openid=null, leshua_order_id=null, merchant_refund_id=null, leshua_refund_id=null, status=null, failure_reason=null)' },
      ]
      for(let item of arr){
        item.showMore = false;
        this.tableData.push(item)
      }*/
    },
    searchData(){
      this.page = {
        current: 1,
        size: 10,
      }
      this.initData();
    },
    resetForm(){
      this.$refs['form'].resetFields();
    },
    handleSizeChange(val){
      this.page = {
        current: 1,
        size: val
      }
      this.initData();
    },
    handleCurrentChange(val){
      this.page.current = val;
      this.initData();
    }
  }
}
</script>
<style lang="scss" scoped>
.row-content{
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.content-part{
  width: 80%;
  height: 40px;
  position: relative;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  line-height: 40px;
}
.content-all{
  width: 80%;
  height: auto;
  position: relative;
  line-height: 25px;
}
.btn-down{
  width: 18%;
  height: 40px;
  position: relative;
  text-align: right;
  line-height: 40px;
  font-size: 14px;
  color: var(--lightBg);
}
.btn-up{
  width: 18%;
  height: 40px;
  position: relative;
  text-align: right;
  line-height: 40px;
  font-size: 14px;
  color: #606266;
}
</style>
